<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Elements</h3>
</div>
<div class="p-md">
  <h5 class="no-margin m-b font-bold">Inputs</h5>
  <p>
    Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
  </p>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">Text</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">Rounded</label>
      <div class="col-sm-10">
        <input type="text" class="form-control rounded">
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label" for="input-id-1">Label focus</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="input-id-1">
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" name="password" class="form-control">
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Placeholder</label>
      <div class="col-sm-10">
        <input type="text"  class="form-control" placeholder="placeholder">
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">Help text</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="help-block m-b-none">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-lg-2 control-label">Disabled</label>
      <div class="col-lg-10">
        <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
      </div>
    </div>

    <div class="form-group">
      <label class="col-lg-2 control-label">Readonly </label>
      <div class="col-lg-10">
        <input class="form-control" type="text" placeholder="Readonly  input here..." readonly>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-lg-2 control-label">Static control</label>
      <div class="col-lg-10">
        <p class="form-control-static">email@example.com</p>
      </div>
    </div>
    
    <div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label">Input with success</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
    </div>
    
    <div class="form-group has-warning has-feedback">
      <label class="col-sm-2 control-label">Input with warning</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
    </div>
    
    <div class="form-group has-error has-feedback">
      <label class="col-sm-2 control-label">Input with error</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
    </div>
    
    <div class="form-group form-group-lg">
      <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Column sizing</label>
      <div class="col-sm-10">
        <div class="row">
          <div class="col-md-2">
            <input type="text" class="form-control" placeholder=".col-md-2">
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control" placeholder=".col-md-3">
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" placeholder=".col-md-4">
          </div>
        </div>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Input groups</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" placeholder="Username">
        </div>
        <div class="input-group m-b">
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
        <div class="input-group m-b">
          <span class="input-group-addon">$</span>
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
        <div class="input-group m-b">
          <span class="input-group-addon">
            <input type="checkbox">
          </span>
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <span class="input-group-addon">
            <input type="radio">
          </span>
          <input type="text" class="form-control">
        </div>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Button addons</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">With dropdowns</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href>Action</a></li>
              <li><a href>Another action</a></li>
              <li><a href>Something else here</a></li>
              <li class="divider"></li>
              <li><a href>Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a href>Action</a></li>
              <li><a href>Another action</a></li>
              <li><a href>Something else here</a></li>
              <li class="divider"></li>
              <li><a href>Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
        </div>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Segmented</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn btn-default" tabindex="-1">Action</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href>Action</a></li>
              <li><a href>Another action</a></li>
              <li><a href>Something else here</a></li>
              <li class="divider"></li>
              <li><a href>Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn btn-default" tabindex="-1">Action</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a href>Action</a></li>
              <li><a href>Another action</a></li>
              <li><a href>Something else here</a></li>
              <li class="divider"></li>
              <li><a href>Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
        </div>
      </div>
    </div>

    <h5 class="font-bold">Checkboxes and radios</h5>
    <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one from many.</p>
    <div class="form-group">
      <label class="col-sm-2 control-label">Default (stacked)</label>
      <div class="col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">
            one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="checkbox disabled">
          <label>
            <input type="checkbox" value="" disabled>
            two is disabled
          </label>
        </div>

        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
            one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            two can be something else and selecting it will deselect one
          </label>
        </div>
        <div class="radio disabled">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            three is disabled
          </label>
        </div>
      </div>
    </div>

    
    <div class="form-group">
      <label class="col-sm-2 control-label">Inline</label>
      <div class="col-sm-10">
        <label class="checkbox-inline">
          <input type="checkbox" value="option1"> a
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" value="option2"> b
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" value="option3"> c
        </label>
        <br>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
        </label>
      </div>
    </div>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Styled</label>
      <div class="col-sm-10">
        <div class="checkbox">
          <label class="ui-checks">
            <input type="checkbox" value="">
            <i></i>
            one
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-checks">
            <input type="checkbox" checked value="">
            <i></i>
            two checked
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-checks">
            <input type="checkbox" checked disabled value="">
            <i></i>
            three checked and disabled
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-checks">
            <input type="checkbox" disabled value="">
            <i></i>
            four disabled
          </label>
        </div>
        <div class="radio">
          <label class="ui-checks">
            <input type="radio" name="a" value="option1">
            <i></i>
            one
          </label>
        </div>
        <div class="radio">
          <label class="ui-checks">
            <input type="radio" name="a" value="option2" checked>
            <i></i>
            two checked
          </label>
        </div>
        <div class="radio">
          <label class="ui-checks">
            <input type="radio" value="option2" checked disabled>
            <i></i>
            three checked and disabled
          </label>
        </div>
        <div class="radio">
          <label class="ui-checks">
            <input type="radio" name="a" disabled>
            <i></i>
            four disabled
          </label>
        </div>

        <div class="radio">
          <label class="ui-checks ui-checks-md">
            <input type="radio" name="a">
            <i></i>
            Medium size radio
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-checks ui-checks-md">
            <input type="checkbox">
            <i></i>
            Medium size checkbox
          </label>
        </div>
        <div class="m-b-xs m-t">
          <label class="ui-checks ui-checks-lg">
            <input type="radio" name="a">
            <i></i>
            Large size radio
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-checks ui-checks-lg">
            <input type="checkbox">
            <i></i>
            Large size checkbox
          </label>
        </div>
      </div>
    </div>    
   
    <div class="form-group">
      <label class="col-sm-2 control-label">Switch</label>
      <div class="col-sm-10">
        <label class="ui-switch m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
        <label class="ui-switch bg-primary m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
        <label class="ui-switch bg-info m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
        <label class="ui-switch bg-warning m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>      
        <label class="ui-switch bg-danger m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
      </div>
    </div>

    
    <div class="form-group">
      <label class="col-sm-2 control-label">Radio Switch</label>
      <div class="col-sm-10">
        <label class="ui-switch m-t-xs m-r">
          <input type="radio" name='switch' checked>
          <i></i>
        </label>
        <label class="ui-switch m-t-xs m-r">
          <input type="radio" name='switch'>
          <i></i>
        </label>
      </div>
    </div>

    
    <div class="form-group">
      <label class="col-sm-2 control-label">Medium</label>
      <div class="col-sm-10">
        <label class="ui-switch ui-switch-md bg-info m-t-xs">
          <input type="checkbox" checked>
          <i></i>
        </label>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">Large</label>
      <div class="col-sm-10">
        <label class="ui-switch ui-switch-lg bg-dark m-t-xs m-r">
          <input type="checkbox" >
          <i></i>
        </label>
      </div>
    </div>

    <h5 class="font-bold">Selects and Textarea</h5>
    <p>Use the default option, or add multiple to show multiple options at once.</p>
    
    <div class="form-group">
      <label class="col-sm-2 control-label">Select</label>
      <div class="col-sm-10">
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group form-group-lg">
      <label class="col-sm-2 control-label">Select large</label>
      <div class="col-sm-10">
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group form-group-sm">
      <label class="col-sm-2 control-label">Select small</label>
      <div class="col-sm-10">
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">Multiple</label>
      <div class="col-lg-4">
        <select multiple class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">Disabled</label>
      <div class="col-sm-10">
        <select class="form-control" disabled>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">Textarea</label>
      <div class="col-sm-10">
        <textarea class="form-control" rows="5"></textarea>
      </div>
    </div>


    <div class="form-group">
      <label class="col-sm-2 control-label">File input</label>
      <div class="col-sm-10">
        <input type="file">
      </div>
    </div>
    
    
    <div class="form-group m-t-lg">
      <div class="col-sm-4 col-sm-offset-2">
        <button type="submit" class="btn btn-default">Cancel</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </form>
</div>